html, body { width: 100%; height: 100%;}
body { margin: 0; -webkit-user-select: none; touch-action: none; }
a, input, button, select, ul, div { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; border: none; border-radius: 0; outline: none;  }
a { text-decoration: none;}
p, ul, li, h1, h2, button { margin: 0; padding: 0;}
li { list-style: none;}
table, th, tr, td { margin: 0; padding: 0; border-collapse: collapse; }

@font-face {
    font-family: 'kuaile';
    src:url('../fonts/kuaile.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body { background-color: #000;}


.mode_stave { background-color: #ffffff; width: 100%; height: 100%;}


/* 加载 */
/*.loading { background: -webkit-linear-gradient(top,#b1f7fe,#8fdcfe); z-index: 1000;*/
.loading { background-color: transparent; z-index: 1000;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.loading .loading-bar {margin-left: 50%;margin-right: 50%;height: 100%;width: auto;}
.loading .wrap { margin: 3.59rem auto 0; width: 4.4rem; position: relative; display: none;}
.loading .flower { margin: 0 auto; width: 1.49rem; height: 2.71rem;
    background: url(../img/flower.png) no-repeat center; background-size: 1.49rem 2.71rem;}
.loading .bee { width: 1.06rem; height: 1.13rem; position: absolute; top: 0; left: 0;
    background: url(../img/bee.png); background-size: 1.06rem 1.13rem;
    animation: circle 5s linear 0s infinite;
    transform-origin: 2.2rem 1.34rem;}
.loading .msg { font-size: 0.3rem; color: #624315; margin-top: 1.52rem; text-align: center;}

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}


.toolbar { position: fixed; width: 100%; margin-top: 0.43rem; left: 0; font-family: kuaile; font-size: 0.28rem; z-index: 100;}

.toolbar .panel_speed { position: fixed; left: 1.25rem; width: 85%; height: 0.89rem; margin-top: 0.34rem;
    background-color: #f2c939; border-radius: 0.2rem;
    box-sizing: border-box; padding: 0.13rem 0; display: none;}
.toolbar .panel_speed .speed { float: left; font-size: 0.3rem; color: #4d3515; margin-left: 0.48rem; margin-right: 0.8rem;}
.toolbar .panel_speed .speed span { font-family: helvetica; font-size: 0.28rem;}
.toolbar .panel_speed .reduce { float: left; width: 0.57rem; height: 100%; margin-right: 0.39rem;
    background: url(../img/icon_reduce.png) no-repeat center; background-size: 0.57rem 0.57rem;}
.toolbar .panel_speed .range { float: left; width: 10.86rem; height: 100%; }
.toolbar .panel_speed input[type="range"] { width: 100%; height: 8px; margin: 0.25rem 0; border-radius: 3.5px;
    background-color: #4d3515;}
.toolbar .panel_speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.6rem; height: 0.6rem; background-color: #4d3515; border-radius: 0.5rem;}
.toolbar .panel_speed .raise { float: left; width: 0.57rem; height: 100%; margin-left: 0.39rem;
    background: url(../img/icon_raise.png) no-repeat center; background-size: 0.57rem 0.57rem;}


.cd { position:fixed; font-size:128px; color: red; top: 0; left: 0;}
.bg_mask { position: absolute; top: 0px; left: 0px; background-color: #777; z-index: 1002;
    opacity:0.5; -moz-opacity:0.5; filter: alpha(opacity=60);}
